<template>
    <a-collapse class="pannel flex-box col property-pannel" :activeKey="activeKey">
        <a-collapse-panel header="表单属性" key="1">
            <a-button type="primary" @click="handleSave">更新保存</a-button>
            <a-button @click="backList">返回列表</a-button>
            <a-form layout="inline">
                <a-form-item label="表单名称">
                    <a-input v-model="form.dataFormName" />
                </a-form-item>
                <a-form-item label="表单代码">
                    <a-input v-model="form.code" />
                </a-form-item>
            </a-form>
        </a-collapse-panel>
        <a-collapse-panel header="列属性" key="2" :disabled="!col.field.id">
            <a-button type="danger" @click="handleDelRow">删除整行</a-button>
            <a-button type="warning" @click="handleDelCol">删除本列</a-button>
            <a-form layout="inline">
                <a-form-item label="ID">
                    <a-input v-model="col.field.id" disabled />
                </a-form-item>
                <a-form-item label="宽度">
                    <a-input-number v-model="col.span" :min="1" :max="castOverCols"></a-input-number>
                </a-form-item>
                <a-form-item label="偏移">
                    <a-input-number v-model="col.offset" :min="0" :max="castOverCols"></a-input-number>
                </a-form-item>
                <a-form-item label="标签宽度">
                    <a-input-number v-model="col.field.labelSpan" :min="0" :max="24"></a-input-number>
                </a-form-item>
                <a-form-item label="组件宽度">
                    <a-input-number v-model="col.field.wrapperSpan" :min="1" :max="24"></a-input-number>
                </a-form-item>
            </a-form>
        </a-collapse-panel>
        <a-collapse-panel header="组件属性" key="3" :disabled="!col.field.id">
            <a-form layout="inline">
                <a-form-item label="组件"> {{ col.field.name }} {{ col.field.key }} </a-form-item>
                <a-tabs type="card" value="base">
                    <a-tab-pane tab="基础信息" key="base">
                        <template v-if="col.field.key === 'list'">
                            <a-form-item label="表单列表">
                                <a-select v-model="formlist" clearable :options="opts.formlist" style="width:150px;"></a-select>
                            </a-form-item>
                        </template>
                        <template v-if="col.field.key === 'button'">
                            <a-form-item label="按钮类型">
                                <a-select v-model="col.field.props.type" :options="opts.buttonType"> </a-select>
                            </a-form-item>
                            <a-form-item label="是否朴素">
                                <a-switch v-model="col.field.props.ghost"> </a-switch>
                            </a-form-item>
                            <a-form-item label="是否整块">
                                <a-switch v-model="col.field.props.block"> </a-switch>
                            </a-form-item>
                        </template>
                        <a-form-item label="是否显示">
                            <a-switch v-model="col.field.show"> </a-switch>
                        </a-form-item>
                        <a-form-item label="是否启用">
                            <a-switch v-model="col.field.enable"> </a-switch>
                        </a-form-item>
                        <a-form-item label="标签" :label-col="{ span: 6 }" :wrapper-col="{ span: 18 }">
                            <a-input v-model="col.field.label" clearable />
                        </a-form-item>
                        <a-form-item label="默认值" :label-col="{ span: 6 }" :wrapper-col="{ span: 18 }">
                            <a-input v-model="col.field.valueStr" clearable />
                        </a-form-item>
                        <template v-if="['button'].indexOf(col.field.key) === -1">
                            <a-form-item label="字段名">
                                <a-select v-model="col.field.field" :options="castFields" style="width:150px;"></a-select>
                            </a-form-item>
                            <a-form-item label="是否必填">
                                <a-switch v-model="col.field.required"> </a-switch>
                            </a-form-item>
                            <a-form-item label="正则校验" :label-col="{ span: 6 }" :wrapper-col="{ span: 18 }">
                                <a-input v-model="col.field.reg" clearable />
                            </a-form-item>
                            <a-form-item label="常用正则">
                                <a-select :options="opts.reg" @change="col.field.reg = $event" :value="'^.*$'" style="width:150px;"> </a-select>
                            </a-form-item>
                            <a-form-item label="校验提示" :label-col="{ span: 6 }" :wrapper-col="{ span: 18 }">
                                <a-input v-model="col.field.message" clearable />
                            </a-form-item>
                            <a-form-item label="最小值" v-if="col.field.key === 'number'">
                                <a-input-number v-model="col.field.props.min" clearable></a-input-number>
                            </a-form-item>
                            <a-form-item label="最大值" v-if="col.field.key === 'number'">
                                <a-input-number v-model="col.field.props.max" clearable></a-input-number>
                            </a-form-item>
                            <a-form-item label="占位符" :label-col="{ span: 6 }" :wrapper-col="{ span: 18 }" v-if="['select', 'input'].indexOf(col.field.key) !== -1">
                                <a-input v-model="col.field.props.placeholder" clearable />
                            </a-form-item>
                            <a-form-item label="可选项" :label-col="{ span: 6 }" :wrapper-col="{ span: 18 }" v-if="['select', 'radioGroup', 'checkBoxGroup'].indexOf(col.field.key) !== -1">
                                <a-input v-model="col.field.options" clearable />
                            </a-form-item>
                        </template>
                    </a-tab-pane>
                    <a-tab-pane tab="事件管理" key="event">
                        <a-form-item :label="event[0]" :label-col="{ span: 6 }" :wrapper-col="{ span: 18 }" v-for="event in Object.entries(col.field.events)" :key="'event_' + event[0]">
                            <a-input type="textarea" v-model="col.field.events[event[0]]" clearable />
                        </a-form-item>
                        <a-select :options="opts.events" v-model="currentEvent" placeholder="请选择事件"></a-select>
                        <a-select :options="castTargets" v-model="currentTarget" placeholder="请选择目标"></a-select>
                        <a-select :options="opts.operates" v-model="currentOperate" placeholder="请选择操作"></a-select>
                        <a-button @click="handleAddEvent" type="primary">添加事件</a-button>
                    </a-tab-pane>
                </a-tabs>
            </a-form>
        </a-collapse-panel>
    </a-collapse>
</template>

<script>
import eventLib from './event';
import { all as allList } from '@/api/formlist';
import { getByModelId as getFormByModelId } from '@/api/form';
export default {
    name: 'AntdPannel',
    inject: ['backList'],
    props: {
        // 当前列索引
        colIndex: {
            type: Number
        },
        // 当前行索引
        rowIndex: {
            type: Number
        },
        // 当前列
        col: {
            type: Object,
            required: true
        },
        // 当前行
        row: {
            type: Object,
            required: true
        },
        // 表单结构
        form: {
            type: Object,
            required: true
        }
    },
    data() {
        return {
            // 展开面板
            activeKey: ['1'],
            // 事件库
            events: eventLib.events,
            // 操作库
            operates: eventLib.operates,
            // 当前事件
            currentEvent: '',
            // 当前目标
            currentTarget: '',
            // 当前操作
            currentOperate: '',
            // 表单列表
            formlist: null,
            opts: {
                // 按钮类型
                buttonType: [
                    { label: '默认', value: 'default' },
                    { label: '主要', value: 'primary' },
                    { label: '危险', value: 'danger' }
                ],
                // 常用正则
                reg: [
                    { label: '默认', value: /^.*$/ },
                    { label: '手机号码', value: /^1\d{10}$/ },
                    { label: '电话号码', value: /^((\d{3,4}-)|\d{3.4}-)?\d{7,8}$/ },
                    { label: '邮箱地址', value: /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/ },
                    { label: '中文', value: /[\u4e00-\u9fa5]/gm },
                    { label: '身份证号码', value: /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/ },
                    { label: '域名', value: /[a-zA-Z0-9][-a-zA-Z0-9]{0,62}(\/.[a-zA-Z0-9][-a-zA-Z0-9]{0,62})+\/.?/ },
                    {
                        label: 'IP地址',
                        value: /((?:(?:25[0-5]|2[0-4]\\d|[01]?\\d?\\d)\\.){3}(?:25[0-5]|2[0-4]\\d|[01]?\\d?\\d))/
                    }
                ],
                // 常用事件
                events: eventLib.events.map(item => {
                    return { label: item.name, value: item.key };
                }),
                // 常用操作
                operates: eventLib.operates.map(item => {
                    return { label: item.name, value: item.key };
                }),
                // 表单列表
                formlist: []
            }
        };
    },
    computed: {
        // 组装事件目标
        castTargets() {
            return this.form.rows
                .map(row => row.cols)
                .flat()
                .map(col => {
                    return { label: col.field.label, value: col.field.id };
                });
        },
        // 组装可选字段
        castFields() {
            return this.form.fields.map(item => {
                return { label: item.comment + ' - ' + (item.ext ? '扩展' : '固定'), value: item.name };
            });
        },
        // 计算当前行剩余列宽
        castOverCols() {
            const _this = this;
            let res = 24;
            if (this.row.cols.length > 1) {
                res -= this.row.cols
                    .filter((item, index) => index !== _this.colIndex)
                    .map(item => item.span)
                    .reduce((prev, item, index, arr) => {
                        return prev + item;
                    });
            }
            return res;
        }
    },
    watch: {
        formlist: {
            immediate: true,
            async handler(value, old) {
                const _this = this;
                // 当前选中的表单列表
                let formlist = this.opts.formlist.find(item => item.value === value);
                this.col.field.formlist = formlist;
                if (formlist) {
                    // 解析布局
                    let layout = JSON.parse(formlist.dataListLayout);
                    let cols = layout
                        .filter(item => item.show)
                        .map(item => {
                            return {
                                title: item.comment,
                                dataIndex: item.name,
                                scopedSlots: { customRender: item.name }
                            };
                        })
                        .sort((prev, next) => prev.order - next.order);
                    if (formlist.editFlag) {
                        // 获取表单列表对应的自动表单
                        let res = await getFormByModelId(formlist.dataModelId);
                        if (!+res.state) {
                            formlist.dataFormId = res.data.dataFormId;
                            let form = JSON.parse(res.data.dataFormLayout || '[]')
                                .map(item => item.cols)
                                .flat()
                                .map(item => item.field);
                            // 给表单列表放置插槽
                            cols.forEach(item => {
                                _this.col.field.slots[item.scopedSlots.customRender] = form.find(field => field.field === item.scopedSlots.customRender);
                            });
                        }
                    }
                    this.col.field.props.columns = cols;
                }
            }
        }
    },
    mounted() {
        this.handleLoadData();
    },
    methods: {
        //   保存表单
        handleSave() {
            this.$emit('save');
        },
        // 删除列
        handleDelCol() {
            this.$emit('delete-col');
        },
        // 删除行
        handleDelRow() {
            this.$emit('delete-row');
        },
        // 添加事件
        handleAddEvent() {
            if (this.currentEvent && this.currentOperate) {
                let code = this.operates.find(item => item.key === this.currentOperate).invoke;
                if (code.indexOf('$target') !== -1 && this.currentTarget) {
                    code = code.replace('$target', `'${this.currentTarget}'`);
                }
                this.$set(this.col.field.events, this.currentEvent, code);
            }
        },
        // 加载数据
        async handleLoadData() {
            let res = await allList();
            if (!+res.state) {
                this.opts.formlist = res.data.map(item => {
                    return { ...item, label: item.dataListName, value: item.dataListId };
                });
            }
        }
    }
};
</script>

<style lang="scss" scoped>
.property-pannel {
    width: 300px;
    height: 100%;
    .col-pannel {
        width: 99%;
        height: max-content;
    }
    .item-pannel {
        width: 99%;
        height: 100%;
        flex-shrink: 10000;
    }
}
</style>
